<template>
  <div class="news_body">
    <Header>
    </Header>
    <div class="img">
      <img src="../assets/img/lanting.jpg" alt="">
    </div>
    <div class="news">
      <div class="headlines">
        <div class="row_1">
          <!-- 运用了栅格系统 -->
          <div class="col-sm-6 col-md-6  col-lg-6">
            <div class="thumbnail">

              <a :href="'news/journalism/'+list[0].journalism.id">
                <div class="newsImg">
                  <img class="tphoto" :src="list[0].journalismPhotos[0].photoAddress" alt="...">

                </div>
                <!--              <img src=".././assets/img/news/annualmeeting/IMG_8135.png" alt="...">-->
              </a>
              <div class="caption">
                <h2>{{ list[0].journalism.journalismTitle }}</h2>
                <p>{{ list[0].journalism.journalismIntroduce }}</p>
              </div>
            </div>
          </div>
          <div class="col-sm-6 col-md-6  col-lg-6">
            <div class="headlines_nev">
              <div class="nev_head">
                <i class="el-icon-money"></i>
                新闻中心
                <el-divider></el-divider>
              </div>
              <div class="nev_text" v-for="item in list" :key="item">
                <el-card shadow="hover">

                  <p class="p-time"><span
                      class="el-icon-watch">{{ item.journalism.journalismTimeYear }}-{{
                      item.journalism.journalismTimeMonth
                    }}-{{ item.journalism.journalismTimeDay }}</span>
                  </p>
                  <a :href="'news/journalism/'+item.journalism.id">{{ item.journalism.journalismTitle }}</a>
                </el-card>

              </div>

            </div>
          </div>
        </div>
      </div>
    </div>
    <Bottom></Bottom>
  </div>
</template>

<script>
const Header = () => import('../components/Header')
const Bottom = () => import('../components/Bottom')
export default {
  name: "News",
  components: {
    Header,
    Bottom
  },
  data() {
    return {
      list: []
    };
  },
  created() {
    this.$nextTick(function () {
      this.$axios({
        url: '/officialwebsite/journalismFrontDesk/selectAll',
        method: 'get',
      }).then(res => {
        this.list = res.obj
      })
    })
  },

}
</script>

<style lang="less" scoped>
.news_body {
  margin-top: 45px;
  background-color: #eeeeee;

  img {
    width: 100%;
    height: 25em;
  }
}


.news {
  margin: 40px auto;
  display: flex;
  flex-direction: row;
  justify-content: center;

  .headlines {
    width: 1240px;
    min-height: 500px;
  }

  .row_1 {
    margin-top: 10px;

    .newsImg {
      width: 100%;
      height: 400px;

      .tphoto {
        width: 100%;
        height: 100%;
        //防止图片变形
        object-fit: cover;
      }
    }

    .caption {
      max-height: 150px;

      h2 {
        margin-top: 10px;
        font-weight: 600;
      }

      p {
        margin-top: 14px;
        font-size: 16px;
      }
    }

    .headlines_nev {
      overflow: auto;
      height: 515px;
      background-color: #ffffff;

      .nev_head {
        height: 50px;
        background-color: #ffffff;
        font-size: 23px;
        font-weight: 800;
        text-align: center;
        line-height: 50px;
      }

      .nev_text {
        width: 90%;
        margin: 15px auto;

        a {
          font-size: 16px;
        }
      }
    }
  }
}

.el-divider {
  margin: 5px auto
}


@media screen and (max-width: 850px) {
  .news_body {
    margin-top: 0px;

    img {
      height: 15em;
    }

    .news {
      margin-top: 10px;

      .thumbnail {
        min-height: 200px !important;

        .newsImg {
          max-height: 240px !important;

        }

        .caption {
          h2 {
            font-size: 18px;
          }

          p {
            font-size: 14px;
          }
        }

      }
      .headlines_nev {
        .nev_head {
          font-size: 18px;
        }
        .nev_text {
          a {
            font-size: 14px;
          }
        }
      }

    }


  }
}
</style>
